<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	 $(".new_table tr:eq(1)").children("td").find("span").css("background-position","0px 0px")
	 $(".new_table tr:eq(1)").children("td").find("span").css("font-size","10px")
	 $(".new_table tr:eq(2)").children("td").find("span").css("background-position","0px -30px")
     $(".new_table tr:eq(3)").children("td").find("span").css("background-position","0px -60px")
	 $(".new_table tr:eq(13)").children("td").find("span").css("background-position","0px -120px")
	 $(".new_table tr:eq(14)").children("td").find("span").css("background-position","0px -150px")
	 $(".new_table tr:eq(15)").children("td").find("span").css("background-position","0px -180px")
  
	 $.ajax({ 
	   		type: "POST",
	   		url:  "getColumnData",
	   		dataType: "json",
	   		success: function(data){
	   			var scoredata = [
				         	{
				         		name : '上月',
				         		value: data.fMonth,
				         		color: '#7A67EE'
				         	},
				         	{
				         		name : '本月',
				         		value: data.cMonth,
				         		color: '#FFA500'
				         	}
				         ];
	   			var chart = new iChart.ColumnMulti2D({
					render : 'canvasDiv',
					data: scoredata,
					labels: data.name,
					label : {
						rotate: -20,
						fontweight: "bold"
					},
					title : {
						text:'济宁市消防支队月度大队考核     单位:分',
						fontsize:12,
		                font:"宋体",
		                textAlign:"center",
		                height:20,
					},
//					subtitle : '单位:分',
//					footnote : '数据日期：2015-05-05',
					width : 860,
					height : 260,
					background_color : '#ffffff',
					gradient:true,
		            color_factor:0.2,
					animation : true,//开启过渡动画
					animation_duration:800,//800ms完成动画
					shadow : true,
					shadow_blur : 2,
					shadow_color : '#aaaaaa',
					shadow_offsetx : 1,
					shadow_offsety : 0,
					legend:{
						enable:true,
						background_color : null,
						border : {
							enable : false
						}
					},
					coordinate:{
						background_color : '#f1f1f1',
						scale:[{
							 position:'left',	
							 start_scale:0,
							 end_scale:100,
							 scale_space:10,
							 listeners:{
									parseText:function(t,x,y){
										return {text:t}
									}
								}
						}],
						width:720,
						height:180
					},
					sub_option:{
						listeners:{
							/**
							 * r:iChart.Rectangle2D对象
							 * e:eventObject对象
							 * m:额外参数
							 */
							click:function(r,e,m){
// 	 							alert(r.get('name')+' '+r.get('value') + ' ');
// 	 							alert(data.id[r.get('id').split("_")[0]]);
								$.ajax({ 
	   								type: "POST",
	   								url:  "getPie",
	   								data: {
	   									id : data.id[r.get('id').split("_")[0]]
	   								},
	   								dataType: "json",
	   								success: function(data){
	   									var pieData = data.data;
	   									var chart = new iChart.Pie3D(
	   											{
	   												render : 'chart2',
	   												title : {
	   													text : data.target + '项目考核得分分布',
	   													color : '#e0e5e8',
	   													height : 40,
	   													border : {
	   														enable : true,
	   														width : [ 0, 0, 2, 0 ],
	   														color : '#343b3e'
	   													}
	   												},
	   												padding : '2 10',
	   												width : 850,
	   												height : 400,
	   												data : pieData,
	   												shadow : true,
	   												shadow_color : '#15353a',
	   												shadow_blur : 8,
	   												background_color : '#3b4346',
	   												gradient : true,
	   												color_factor : 0.28,
	   												gradient_mode : 'RadialGradientOutIn',
	   												showpercent : true,
	   												decimalsnum : 2,
	   												legend : {
	   													enable : true,
	   													padding : 30,
	   													color : '#e0e5e8',
	   													border : {
	   														width : [ 0, 0, 0, 2 ],
	   														color : '#343b3e'
	   													},
	   													background_color : null,
	   												},
	   												sub_option : {
	   													offsetx : -40,
	   													border : {
	   														enable : false
	   													},
	   													label : {
	   														background_color : '#fefefe',
	   														sign : false,//设置禁用label的小图标
	   														line_height : 10,
	   														padding : 4,
	   														border : {
	   															enable : true,
	   															radius : 4,//圆角设置
	   															color : '#e0e5e8'
	   														},
	   														fontsize : 11,
	   														fontweight : 600,
	   														color : '#444444'
	   													}
	   												},
	   												border : {
	   													width : [ 0, 10, 0, 10 ],
	   													color : '#1e2223'
	   												}
	   											});
	   									chart.bound(0);
	   									$("#bg").css({
	   							            display: "block", height: $(document).height()
	   							        });
	   							        var $box = $('.box');
	   							        $box.css({
	   							            //设置弹出层距离左边的位置
	   							            left: ($("body").width() - $box.width()) / 2 - 20 + "px",
	   							            //设置弹出层距离上面的位置
	   							            top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
	   							            display: "block"
	   							        });	
	   								}
								});
								
							}
						}
					}
			});
			chart.draw();
	   		}
		 });
		 
								$(".close").click(function() {
									$("#bg,.box").css("display", "none");
								});
						})

</script>
</head>

<body>

  <div class="main">
   <div class="main_left fl">
     <div class="main_block_right tab_title_border" style="border-top:1px #dcdcdc  solid;">
       <div class="news_title tab_title_border" style="border-left:1px #dcdcdc  solid;border-right:1px #dcdcdc  solid;">
        <h1>安全警示</h1>
        <div class="clear"></div>
       </div>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" class="new_table">
          <tr class="tab_title">
            <td>当前排名</td>
            <td>大队名称</td>
            <td>总得分</td>
            <td>排名状态</td>
          </tr>
          <c:forEach items="${targetScoreList}" var="targetScore">
					<tr>
						<td><span>${targetScore.num }</span></td>
						<td>${targetScore.name }</td>
						<td>${targetScore.score }</td>
						<td><c:if test="${targetScore.upOrDown == 1}"><em class="pm_up" title="排名上升"></em></c:if>
						<c:if test="${targetScore.upOrDown == 0}"><em class="pm_down" title="排名下降"></em></c:if>
						${targetScore.dValue }</td>
					</tr>
			</c:forEach>
          
        </table>
       
     </div>
   </div>
   <div class="main_right fr">
     <div class="main_block">
     <div class="block_title">
       <h1>考核工作</h1>
       <div class="clear"></div>
     </div>
     
     <div class="block block1 block_content" style="display:block;" id="canvasDiv">
     </div>
     <div id="bg"></div>
		
		<div class="box" style="display:none">
    		<h2>考核得分分布图<a href="#" class="close">关闭</a></h2>
    		<div id="chart2">
    		</div>
		</div>
   </div>
    
      <div class="line10"></div>
      <div class="main_block_news">
      <div class="main_block_left fl">
       <div class="news_title">
        <h1>通知公告</h1>
        <a href="#">更多</a>
        <div class="clear"></div>
       </div>
       <div class="main_news">
           <ul class="main_news_list">
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">北湖大队现场会筹备事项</a><span>2015-05-13</span></h3>
                 <p>根据现场会筹备工作建设需要，预计5月底完成大队路面和网络建设工作。</p>
               </div>
             </li>
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">实战演练月开展</a><span>2015-05-13</span></h3>
                 <p>各中队根据上报预案修订演练表格查看预案、演练记录，全面加强岗位练兵建设。</p>
               </div>
             </li>
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">中队灭火救援实战化练兵活动考核</a><span>2015-05-13</span></h3>
                 <p>针对全市消防中队灭火救援实战化练兵活动进行业务工作精细化量化考核。</p>
               </div>
             </li>
            
           </ul>
       </div>
     </div>
     
     <div class="main_block_left fr">
       <div class="news_title">
        <h1>通知公告</h1>
        <a href="#">更多</a>
        <div class="clear"></div>
       </div>
       <div class="main_news">
           <ul class="main_news_list01">
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">大厦车辆停放乱堵消防通道被责令</a><span>2015-05-10</span></h3>
                 <p>大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防辆停放乱堵消防……</p>
               </div>
             </li>
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">大厦车辆停放乱堵消防通道被责令</a><span>2015-05-10</span></h3>
                 <p>大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防辆停放乱堵消防……</p>
               </div>
             </li>
             <li>
               <div class="main_news_infor">
                 <h3><a href="#">大厦车辆停放乱堵消防通道被责令</a><span>2015-05-10</span></h3>
                 <p>大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防通道被责令大厦车辆停放乱堵消防辆停放乱堵消防……</p>
               </div>
             </li>
            
           </ul>
       </div>
     </div>
     
     </div>
    </div>
     <div class="clear"></div>
  </div>
  <div class="line10"></div>
</body>
</html>